<template>
	<div class="payment-method-container">

		<!-- 主要内容区域 -->
		<div class="content-section">
			<!-- 收款方式列表 -->
			<div class="section-title flex_between">
				<div class="ml5">自定义费用列表</div>
				<div class="add-custom-section">
					<el-button type="text" @click="addCustomPayment" class="add-button">
						<i class="el-icon-plus"></i>
						<span>添加自定义费用</span>
					</el-button>
				</div>
			</div>
			<div class="payment-methods-card">
				<div v-for="(method, index) in feetList" :key="index" class="payment-method-item flex_between">
					<div class="flex1">
						<div class="payment-methods-cell flex_between" v-if="method.paytype != 'wxntv'">
							<div class="method-info" @click="togglePaymentMethod(index)">
								<div class="method-name">{{ method.title }}</div>
								<div class="font_bule bold font_size16">{{ method.fee }}</div>
								<div class="ellipsis font_black7 font_size14" style="max-width:800px;">{{ method.txt }}
								</div>
							</div>
							<div class="payment-actions">
								<div class="custom-checkbox" :class="{
									'checkbox-checked': method.status == 1
								}" @click.stop="togglePaymentMethod(index)">
									<i v-if="method.status == 1" class="el-icon-check"></i>
								</div>
							</div>
						</div>
					</div>
					<div class="action-buttons ml10" v-if="method.paytype != 'wxntv'">
						<i class="el-icon-edit edit-btn" @click.stop="editPaymentMethod(method)"></i>
						<el-popconfirm confirm-button-text='确实' cancel-button-text='取消'
							:title="'确定要删除收款方式' + method.title + '吗？'" @confirm="deletePaymentMethod(method)">
							<i slot="reference" class="el-icon-delete delete-btn"></i>
						</el-popconfirm>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-section">
			<el-button type="primary" @click="savePaymentHandle" class="save-button">
				保存设置
			</el-button>
		</div>
		<el-dialog title="自定义费用" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body
			:modal-append-to-body="false" :z-index="3000">
			<el-form :model="editForm" ref="formRef" label-width="80px" :rules="rules">
				<el-form-item label="费用名称" prop="title">
					<el-input v-model="editForm.title" placeholder="请输入费用名称"></el-input>
				</el-form-item>
				<el-form-item label="费用金额" prop="fee">
					<el-input-number v-model="editForm.fee" :precision="2" controls-position="right" :min="1"
						:max="99999999" style="width: 100%;text-align: left;"></el-input-number>
				</el-form-item>
				<el-form-item label="备 注">
					<el-input v-model="editForm.txt" placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmEdit">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, defineProps, defineEmits, watch, computed } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
const { proxy } = getCurrentInstance()
// 表单数据
const paymentForm = ref({
	onlineWechat: true
})

const feetList = ref([])
const getPayLs = async () => {
	try {
		let res = await proxy.$api({ url: config.compset_fee_ls, data: {} })
		let result = res.data
		if (res.status == 1 && result) {
			feetList.value = result.fee_ls || []
		}
	} catch (error) { }
}
getPayLs()


// 编辑弹窗相关
const dialogVisible = ref(false)
const editForm = ref({ title: '', id: 0, status: 1, fee: 0, txt: '' })
const rules = ref({
	title: [
		{ required: true, message: '请输入费用名称', trigger: 'blur' },
		{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
	],
	fee: [
		{ required: true, message: '请输入费用金额', trigger: 'blur' },
	],
})

// 切换收款方式选择状态
const togglePaymentMethod = async (index) => {
	feetList.value[index].status = feetList.value[index].status == 1 ? 2 : 1;
}

const savePaymentHandle = async () => {
	let params = {
		ids: feetList.value
			.filter(item => item.status == 1)
			.map(item => item.id)
			.filter(id => id != null),
		ch: 'status'
	}
	console.log("params===", params)
	try {
		let res = await proxy.$api({ url: config.compset_fee_saves, data: params })
		if (res.status == 1) {
			proxy.$message({
				message: '保存成功',
				type: 'success'
			})
		}
		getPayLs()
	} catch (error) { }
}

// 添加自定义收款方式
const addCustomPayment = () => {
	dialogVisible.value = true
	editForm.value = { title: '', id: 0, status: 1 }
}

const editPaymentMethod = (item) => {
	editForm.value = { ...item }
	dialogVisible.value = true
}

const confirmEdit = () => {
	proxy.$refs.formRef.validate((valid) => {
		if (valid) {
			savePaymentSettings()
		}
	})
}

const handleClose = () => {
	dialogVisible.value = false
}

const deletePaymentMethod = async (item) => {
	try {
		let res = await proxy.$api({ url: config.compset_fee_del, data: { id: item?.id } })
		if (res.status == 1) {
			getPayLs()
		} else {
			proxy.$message.error(res?.msg || '删除失败')
		}
	} catch (error) { }
}

const savePaymentSettings = async () => {
	let params = {
		...editForm.value
	}
	try {
		let res = await proxy.$api({ url: config.compset_fee_save, data: params })
		if (res.status == 1) {
			dialogVisible.value = false
			getPayLs()
		}
	} catch (error) { }
}

onMounted(() => { })


</script>

<style lang="scss" scoped>
.payment-method-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-section {
	flex: 1;
	padding: 16px 20px;
	overflow-y: auto;
	border-radius: 12px;
}

.payment-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.payment-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.payment-name {
	font-size: 16px;
	font-weight: 600;
	color: white;
}

.payment-status {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	opacity: 0.9;
}

/* 区域标题 */
.section-title {
	font-size: 15px;
	font-weight: 600;
	color: #303133;
	margin-bottom: 12px;
	padding-left: 6px;
	border-left: 3px solid #4096ff;
}

.payment-methods-card {
	overflow: hidden;
	// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	margin-bottom: 16px;
	padding: 10px;
}

.payment-methods-cell {
	// width: 100%;
	flex: 1;
	padding: 14px 28px;
	border-bottom: 1px solid #f0f2f5;
	transition: background-color 0.2s ease;
	background-color: #fff;

	&:hover:not(.payment-disabled) {
		background-color: #f8f9ff;
	}
}

.payment-method-item {
	border-radius: 0;

	&:last-child {
		border-bottom: none;
	}

	&:first-child .payment-methods-cell {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	&:last-child .payment-methods-cell {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}
}

.payment-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.method-info {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	box-sizing: border-box;
}

.method-icon {
	height: 32px;
	width: 32px;
}

.method-name {
	font-size: 18px;
	font-weight: 500;
	color: #303133;
}

/* 支付操作区域 */
.payment-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	// width: 80px;
}

/* 自定义复选框 */
.custom-checkbox {
	width: 24px;
	height: 24px;
	border: 2px solid #dcdfe6;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	background-color: white;

	&.checkbox-checked {
		background-color: #4096ff;
		border-color: #4096ff;
		color: white;
	}

	&.checkbox-disabled {
		cursor: not-allowed;
	}
}

/* 操作按钮区域 */
.action-buttons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.edit-btn {
	color: #67c23a;
	padding: 0 8px;
	font-size: 20px;
}

.delete-btn {
	color: #f56c6c;
	padding: 0 8px;
	font-size: 20px;
}

/* 添加自定义收款方式 */
.add-custom-section {
	text-align: center;
	margin-top: 8px;
}

.add-button {
	font-size: 14px;
	color: #4096ff;
	padding: 8px 16px;
	border-radius: 6px;
	background-color: #ecf5ff;
	transition: all 0.2s ease;

	&:hover {
		background-color: #4096ff;
		color: white;
		transform: translateY(-1px);
	}

	i {
		margin-right: 4px;
	}
}

/* 底部保存按钮 */
.footer-section {
	padding: 16px 20px;
	background-color: white;
	box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.02);
}

.save-button {
	width: 100%;
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	background: linear-gradient(135deg, #4096ff 0%, #69b1ff 100%);
	border: none;
	color: white;
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(64, 150, 255, 0.2);

	&:hover {
		background: linear-gradient(135deg, #3a8ee6 0%, #5da9ff 100%);
		transform: translateY(-1px);
		box-shadow: 0 4px 10px rgba(64, 150, 255, 0.3);
	}

	&:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(64, 150, 255, 0.2);
	}
}

::v-deep .el-input__inner {
	text-align: left !important;
}
</style>